//update 17/6 JV lcx
var DragChooseColor = function () {
    var panel = $('chooseColorPopup');
    var title = panel.getElement('.popupTitle');
    var beginPos = {};
    var beginMouse = {}
    var moved = {}
    var events = {
        windowMouseMove: function (e) {
            new Event(e).stop()
            moved.x = e.clientX - beginMouse.x;
            moved.y = e.clientY - beginMouse.y;

            panel.setStyles({
                top: moved.y + beginPos.top,
                left: moved.x + beginPos.left
            });
        },
        titleMouseDown: function (e) {
            new Event(e).stop()
            beginPos.top = Number.toInt(panel.getStyle('top'));
            beginPos.left = Number.toInt(panel.getStyle('left'));
            title.setStyle('cursor', 'move');
            beginMouse.x = e.clientX;
            beginMouse.y = e.clientY;

            document.addEvent('mousemove', events.windowMouseMove);
            document.addEvent('mouseup', events.windowMouseUp);
            document.ondrag = function () { return false }
        },
        windowMouseUp: function (e) {
            title.setStyle('cursor', '');
            document.removeEvent('mousemove', events.windowMouseMove);
            document.removeEvent('mouseup', events.windowMouseUp)
            document.ondrag = null;
        }
    }
    title.addEvent('mousedown', events.titleMouseDown);
}
//end update 17/6 lcx
window.addEvent('domready', function(){
    new DragChooseColor();
	/* image background*/

	bgcolor = $('bgBodyInput');

	bgcolor.addEvent('change',function(){

		color = this.options[this.selectedIndex].value;		

		document.body.setStyle('background', 'url("templates/color1/images/colors/bg/'+ color +'")');

	});

	

	new MooRainbow('mainColor', {

		id: 'mymainColor',

		startColor: [HexToR(jsmain), HexToG(jsmain), HexToB(jsmain) ],

		wheel: true,		

		onChange: function(color) {

			$('jv-header').getElements('.jv-block').setStyle('background', color.hex);

			$('jv-mainnav').getElements('.jv-block').setStyle('background', color.hex);

			$('jv-container').getElements('.jv-block').setStyle('background', color.hex);

			$('jv-footer').getElements('.jv-block').setStyle('background', color.hex);

			$('mainColorInput').value = color.hex;

			$('mainColor').setStyle('background-color', color.hex);

		},

		onComplete: function(color) {

			$('jv-header').getElements('.jv-block').setStyle('background', color.hex);

			$('jv-mainnav').getElements('.jv-block').setStyle('background', color.hex);

			$('jv-container').getElements('.jv-block').setStyle('background', color.hex);

			$('jv-footer').getElements('.jv-block').setStyle('background', color.hex);

			$('mainColorInput').value = color.hex;

			$('mainColor').setStyle('background-color', color.hex);

		}

	});

	

	new MooRainbow('bodyTextColor', {

		id: 'mybodyTextColor',

		startColor: [HexToR(jscolorbody), HexToG(jscolorbody), HexToB(jscolorbody) ],

		wheel: true,		

		onChange: function(color) {

			document.body.setStyle('color', color.hex);

			$('bodyTextColorInput').value = color.hex;

			$('bodyTextColor').setStyle('background-color', color.hex);

		},

		onComplete: function(color) {

			document.body.setStyle('color', color.hex);

			$('bodyTextColorInput').value = color.hex;

			$('bodyTextColor').setStyle('background-color', color.hex);

		}

	});

	

	

	new MooRainbow('bodyLinkColor', {

		id: 'mybodyLinkColor',

		startColor: [HexToR(jscolora), HexToG(jscolora), HexToB(jscolora) ],

		wheel: true,		

		onChange: function(color) {

			document.getElements('a').setStyle('color', color.hex);

			$('bodyLinkColorInput').value = color.hex;

			$('bodyLinkColor').setStyle('background-color', color.hex);			

		},

		onComplete: function(color) {

			document.getElements('a').setStyle('color', color.hex);

			$('bodyLinkColorInput').value = color.hex;

			$('bodyLinkColor').setStyle('background-color', color.hex);

		}

	});

	

	/*menu*/

	new MooRainbow('menuBgColor', {

		id: 'mymenuColor',

		startColor: [HexToR(jsbgmenu), HexToG(jsbgmenu), HexToB(jsbgmenu) ],

		wheel: true,		

		onChange: function(color) {

			$('menu').getElements('.mainmenu').setStyle('background', 'url("templates/layout1/images/trans.png") repeat-x scroll left top ' + color.hex );

			//$('menu').getElements('.mainmenu').setStyle('border' , '1px solid '+ color.hex);

			$('menuBgColorInput').value = color.hex;

			$('menuBgColor').setStyle('background-color', color.hex);

		},

		onComplete: function(color) {			

			$('menu').getElements('.mainmenu').setStyle('background', 'url("templates/layout1/images/trans.png") repeat-x scroll left top ' + color.hex );			

			$('menuBgColorInput').value = color.hex;

			$('menuBgColor').setStyle('background-color', color.hex);	

		}

	});

	

	new MooRainbow('menuTextColor', {

		id: 'mymenuTextColor',

		startColor: [HexToR(jsmenutext), HexToG(jsmenutext), HexToB(jsmenutext) ],

		wheel: true,		

		onChange: function(color) {

			$('menu').getElements('span').setStyle('color', color.hex);						

			$('menuTextColorInput').value = color.hex;

			$('menuTextColor').setStyle('background-color', color.hex);

		},

		onComplete: function(color) {

			$('menu').getElements('span').setStyle('color', color.hex);			

			$('menuTextColorInput').value = color.hex;

			$('menuTextColor').setStyle('background-color', color.hex);

		}

	});

	

	new MooRainbow('menuActiveColor', {

		id: 'mymenuActiveColor',

		startColor: [HexToR(jsmenubgcolor), HexToG(jsmenubgcolor), HexToB(jsmenubgcolor) ],

		wheel: true,		

		onChange: function(color) {

			$('menu').getElements('.active').setStyle('color', color.hex);			

			//$('menu').getElements('.active').setStyle('border', '1px solid ' + color.hex);

			$('menuActiveColorInput').value = color.hex;

			$('menuActiveColor').setStyle('background-color', color.hex);

		},

		onComplete: function(color) {

			$('menu').getElements('.active').setStyle('color', color.hex);			

			//$('menu').getElements('.active').setStyle('border', '1px solid ' + color.hex);

			$('menuActiveColorInput').value = color.hex;

			$('menuActiveColor').setStyle('background-color', color.hex);

		}

	});

	

	/*block*/

	new MooRainbow('blockBgColor', {

		id: 'myblockColor',

		startColor: [HexToR(jsborderblock), HexToG(jsborderblock), HexToB(jsborderblock) ],

		wheel: true,		

		onChange: function(color) {		

			$('jv-sidebar1').getElements('.title').setStyle('background', 'url("templates/layout1/images/trans.png") repeat-x scroll left top ' + color.hex);

			$('jv-content').getElements('.title').setStyle('background', 'url("templates/layout1/images/trans.png") repeat-x scroll left top ' + color.hex);

			$('welcome').getElements('.title').setStyle('background', 'url("templates/layout1/images/trans.png") repeat-x scroll left top ' + color.hex);

			$('jv-footer').getElements('.jv-inner').setStyle('background', 'url("templates/layout1/images/trans.png") repeat-x scroll left top ' + color.hex);

			$('blockBgColorInput').value = color.hex;

			$('blockBgColor').setStyle('background-color', color.hex);

		},

		onComplete: function(color) {

			$('jv-sidebar1').getElements('.title').setStyle('background', 'url("templates/layout1/images/trans.png") repeat-x scroll left top ' + color.hex);

			$('jv-content').getElements('.title').setStyle('background', 'url("templates/layout1/images/trans.png") repeat-x scroll left top ' + color.hex);

			$('welcome').getElements('.title').setStyle('background', 'url("templates/layout1/images/trans.png") repeat-x scroll left top ' + color.hex);

			$('jv-footer').getElements('.jv-inner').setStyle('background', 'url("templates/layout1/images/trans.png") repeat-x scroll left top ' + color.hex);

			$('blockBgColorInput').value = color.hex;

			$('blockBgColor').setStyle('background-color', color.hex);	

		}

	});

	

	new MooRainbow('blockBgMainColor', {

		id: 'myblockMainColor',

		startColor: [HexToR(jsborderblock), HexToG(jsborderblock), HexToB(jsborderblock) ],

		wheel: true,		

		onChange: function(color) {

			$('jv-sidebar1').getElements('.contentmod').setStyle('background', color.hex);

			$('welcome').getElements('.contentmod').setStyle('background', color.hex);

			$('blockBgMainColorInput').value = color.hex;

			$('blockBgMainColor').setStyle('background-color', color.hex);

		},

		onComplete: function(color) {			

			$('jv-sidebar1').getElements('.contentmod').setStyle('background', color.hex);		

			$('welcome').getElements('.contentmod').setStyle('background', color.hex);

			$('blockBgMainColorInput').value = color.hex;

			$('blockBgMainColor').setStyle('background-color', color.hex);	

		}

	});

	

	new MooRainbow('blockTextColor', {

		id: 'myblockTextColor',

		startColor: [HexToR(jstitleblock), HexToG(jstitleblock), HexToB(jstitleblock) ],

		wheel: true,		

		onChange: function(color) {

			$('jv-sidebar1').getElements('.title').setStyle('color', color.hex);

			$('jv-content').getElements('.title').setStyle('color', color.hex);

			$('welcome').getElements('.title').setStyle('color', color.hex);			

			$('blockTextColorInput').value = color.hex;

			$('blockTextColor').setStyle('background-color', color.hex);

		},

		onComplete: function(color) {

			$('jv-sidebar1').getElements('.title').setStyle('color', color.hex);

			$('jv-content').getElements('.title').setStyle('color', color.hex);

			$('welcome').getElements('.title').setStyle('color', color.hex);	

			$('blockTextColorInput').value = color.hex;

			$('blockTextColor').setStyle('background-color', color.hex);

		}

	});

	

	new MooRainbow('blockActiveColor', {

		id: 'myblockActiveColor',

		startColor: [HexToR(jsa_active), HexToG(jsa_active), HexToB(jsa_active) ],

		wheel: true,		

		onChange: function(color) {

			$('jv-sidebar1').getElements('.active').setStyle('color', color.hex);						

			$('blockActiveColorInput').value = color.hex;

			$('blockActiveColor').setStyle('background-color', color.hex);

		},

		onComplete: function(color) {

			$('jv-sidebar1').getElements('.active').setStyle('color', color.hex);			

			$('blockActiveColorInput').value = color.hex;

			$('blockActiveColor').setStyle('background-color', color.hex);

		}

	});

	

			

	/* set color default*/

	color = $('color');

	color.addEvent('change',function(){

		value = this.options[this.selectedIndex].value;		

		url = 'getcolor.php?folder=layout1&color=' + value;

		new Ajax(url, {

		    method: "get",		    

		    onComplete: function() {		      

		       var x = eval('(' + this.response.text + ')');

		       

		       document.body.setStyle('background', 'url("templates/layout1/images/colors/bg/'+ x.bgbody +'")');

		       setVals( $('bgBodyInput'), x.bgbody );

		       //$('bodyColorInput').value = x.body;

			   //$('bodyColor').setStyle('background-color', x.body);

			   $('jv-header').getElements('.jv-block').setStyle('background', x.main);

				$('jv-mainnav').getElements('.jv-block').setStyle('background', x.main);

				$('jv-container').getElements('.jv-block').setStyle('background', x.main);

				$('jv-footer').getElements('.jv-block').setStyle('background', x.main);

				$('mainColorInput').value = x.main;

				$('mainColor').setStyle('background-color', x.main);

			   document.body.setStyle('color', x.colorbody);

			   $('bodyTextColorInput').value = x.colorbody;

			   $('bodyTextColor').setStyle('background-color', x.colorbody);

			   document.getElements('a').setStyle('color', x.colora);

			   $('bodyLinkColorInput').value = x.colora;

			   $('bodyLinkColor').setStyle('background-color', x.colora);	

			   

			   $('menu').getElements('.mainmenu').setStyle('background', 'url("templates/layout1/images/trans.png") repeat-x scroll left top ' + x.bgmenu );

				//$('menu').getElements('.mainmenu').setStyle('border' , '1px solid '+ x.bgmenu);			

				$('menuBgColorInput').value = x.bgmenu;

				$('menuBgColor').setStyle('background-color', x.bgmenu );

				$('menu').getElements('span').setStyle('color', x.menutext);

				$('menuTextColorInput').value = x.menutext;

				$('menuTextColor').setStyle('background-color', x.menutext);				

				$('menu').getElements('.active').setStyle('color', x.menubgcolor);	

				$('menuActiveColorInput').value = x.menubgcolor;

				$('menuActiveColor').setStyle('background-color', x.menubgcolor);

				

				$('jv-sidebar1').getElements('.title').setStyle('background', 'url("templates/layout1/images/trans.png") repeat-x scroll left top ' + x.borderblock);

				$('jv-content').getElements('.title').setStyle('background', 'url("templates/layout1/images/trans.png") repeat-x scroll left top ' + x.borderblock);

				$('welcome').getElements('.title').setStyle('background', 'url("templates/layout1/images/trans.png") repeat-x scroll left top ' + x.borderblock);	

				$('blockBgColorInput').value = x.borderblock;

				$('blockBgColor').setStyle('background-color', x.borderblock);

				

				$('jv-sidebar1').getElements('.title').setStyle('color', x.titleblock);

				$('jv-content').getElements('.title').setStyle('color', x.titleblock);

				$('welcome').getElements('.title').setStyle('color', x.titleblock);

				$('blockTextColorInput').value = x.titleblock;

				$('blockTextColor').setStyle('background-color', x.titleblock);

				

				$('jv-sidebar1').getElements('.contentmod').setStyle('background', x.borderblockmain);

				$('welcome').getElements('.contentmod').setStyle('background', x.borderblockmain);

				$('blockBgMainColorInput').value = x.borderblockmain;

				$('blockBgMainColor').setStyle('background-color', x.borderblockmain);

				

				$('jv-sidebar1').getElements('.active').setStyle('color', x.a_active);	

				$('blockActiveColorInput').value = x.a_active;

				$('blockActiveColor').setStyle('background-color', x.a_active);		

				$('jv-footer').getElements('.jv-inner').setStyle('background', 'url("templates/layout1/images/trans.png") repeat-x scroll left top ' + x.bgmenu);

				$('frmRegister').getElements('.button').setStyle('color', x.bgmenu);

				$('jv-content').getElements('.mod-slide').setStyle('border', '1px solid ' + x.bgmenu);

		    }

		}).request();

	});

});



//show layer

function showPopupLayer(strId){

	var el = $(strId);			

	if(!el)	return;

	var _opacity = 0.5;		

	el.setStyle('display', 'block');

	var zIndex = 9998;		

	

	el.setStyles({

		'opacity': 1,

		'position': 'absolute',

		'top': (window.getHeight() - el.getCoordinates().height)/2 + window.getScrollTop(),

		'left': (window.getWidth() - el.getCoordinates().width)/2 + 'px',

		'z-index': zIndex

	});

	

	  

	window.addEvent('resize', function(e){			

		var w = window.getWidth();			

		el.setStyles({				

			'top': (window.getHeight() - el.getCoordinates().height)/2 + window.getScrollTop(),

			'left': (window.getWidth() - el.getCoordinates().width)/2 + 'px'				

		});

		if(maskObj) {

			maskObj.setStyles({

				'width': window.getWidth() + 'px',

				'height': window.getHeight() + 'px'

			});

		}

	});

	//add event close 

	if($$('#' + strId + ' a.close')[0]) {

		$$('#' + strId + ' a.close')[0].removeEvents().addEvent('click', function(e){

			new Event(e).stop();	

			hideLayer(strId);

			window.removeEvents();

		});

	}	

}

	

function hideLayer(id){

	if(id && $(id)) $(id).setStyles({

		'top': -1500,

		'opacity': 0

	});



	if($('divPopup'+id)) {

		 

		setTimeout(function(){

			$('divPopup'+id).setStyles({

				'top': -1500,

				'opacity': 0

			});

		}, 500);

	}		

	

	window.removeEvents();

}



function setVals(name, value) {

	sel = name;	

	str = value;

	for (i=0; i<sel.options.length; i++) {		

		if (sel.options[i].text == str) {

			sel.selectedIndex = i;

		}

	}

}